<template>
  <div class="web-works-detail">

    <h2 class="title w-text-center">
      <p class="production-name">
        {{ model.name }}
        <span class="type">{{ model.type }}</span>
        <a
          v-if="model.url"
          :href="model.url"
          class="production-local"
          target="_blank">
          <i class="el-icon-share"/>
        </a>
      </p>
    </h2>
    <p
      v-if="model.version"
      class="versition w-text-center">版本：{{ model.version }}</p>
    <p class="date w-text-center text-time">
      开始时间：{{ model.startDateStr }}
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      结束时间：{{ model.endDateStr }}</p>
    <p
      v-if="model.describe"
      class="description w-text-center text-describe">{{ model.describe }}</p>

    <w-marked-parsing :datastr="model.content"/>

  </div>
</template>

<script>
import ProductModel from '@/models/web/ProductModel'
import WMarkedParsing from '@/components/global/marked/parsing'
export default {
  name: 'WebWorksDetail',
  components: {
    WMarkedParsing
  },
  data() {
    return {
      model: new ProductModel()
    }
  },
  mounted() {
    this.model._id = this.$route.query.id
    this.getData()
  },
  methods: {
    /**
     * 获取单个数据
     */
    getData() {
      this.model.getDetail().then(() => {}).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
  .web-works-detail {
    padding: 20px;
    .text-time {
      font-size: 13px;
      line-height: 2;
      color: #999;
    }

    .study-detail {
      padding: 30px 10px;
    }

    .covers {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    .covers .covers-item {
      margin: 30px 0;
      width: 260px;
      height: 260px;
      background-position: center;
      background-size:contain;
      background-repeat:no-repeat;
    }

    .production-name {
      padding: 0px 40px;
      display: inline-block;
      position: relative;
      >.type {
        font-size: 18px;
        color: #999;
      }
    }
    .description {
      color: #666;
      line-height: 24px;
    }
    .production-local {
      position: absolute;
      right: 0;
      bottom: 10px;
      width: 20px;
      height: 20px;
      color: #bfcbd9;
    }
    .versition {
      color: #999;
    }
  }

</style>

